<template>
  <div class="aside">
    <ul>
      <!-- 头像 -->
      <li class="top" @click="isflag">
        <div class="user-img">
          <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" />
        </div>
      </li>
      <li class="tab" v-for="item in List" :key="item.id">
        <router-link :to="'/home' + item.url">
          <div :class="route.path === '/home' + item.url ? 'bk' : ''">
            <div class="icon"></div>
            <div style="text-align: center; font-size: 12px; padding-bottom: 6px">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
  <PersonalIifo v-if="flag === true" />
</template>

<script setup lang="ts">
// 引入--------------------------------------------
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
// import router from '@/router'
// 定义数据类型--------------------------------------------
// 数据--------------------------------------------
const route = useRoute()
let flag = ref(false)
let menu = localStorage.getItem('menu') as any
let MenuList = JSON.parse(menu)
// 生命周期钩子------------------------------------
onMounted(() => {
  console.log(MenuList)
  // userAuthRouters()
})
// 函数--------------------------------------------
const isflag = () => {
  flag.value = !flag.value
}
// 计算属性----------------------------------------
const List = computed(() => MenuList.filter((item: any) => item.postion === 'left'))
</script>

<style scoped lang="less">
.aside {
  width: 75px;
  height: 100vh;
  min-height: 100vh;
  background-color: #ebebeb;
  position: fixed;
  box-shadow: 0 0 12px #666;
  // z-index: 999;
}
.top {
  width: 100%;
  height: 80px;
  overflow: hidden;
  .user-img {
    width: 70%;
    height: 60%;
    margin: auto;
    margin-top: 20px;
    img {
      width: 90%;
      height: 90%;
      margin-left: 2px;
      margin-top: 2px;
    }
  }
}
.tab {
  width: 75%;
  height: 56px;
  margin-left: 10px;
  // border-radius: 10px;
  // background-color: #d8d7d7;
  margin-bottom: 8px;
  .icon {
    width: 80%;
    height: 38px;
    margin: auto;
    // background-color: pink;
  }
}
.bk {
  color: #5094f4;
  background-color: #d1d3d5;
  border-radius: 10px;
}
</style>
